@import "@automattic/onboarding/styles/mixins";
@import "@automattic/onboarding/styles/variables";
@import "@automattic/typography/styles/fonts";

.design-picker__filters {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 24px;

	@include break-large {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-bottom: 40px;
		gap: 24px;
	}

	button.components-button.responsive-toolbar-group__button-item,
	button.components-button.responsive-toolbar-group__swipe-item {
		padding: 8px 16px;
		margin-inline-start: -4px;
		margin-inline-end: 2px;
		font-size: rem(13px);

		&::before {
			background-color: color-mix(in srgb, var(--studio-gray-5) 50%, transparent);
		}

		&:not([class*="is-pressed"]):hover {
			color: var(--studio-gray-100);

			&::before{
				background-color: var(--studio-gray-5);
			}
		}

		&.is-pressed {
			&::before {
				background-color: var(--studio-wordpress-blue);
			}

			&:hover::before {
				background-color: var(--studio-wordpress-blue-60);
			}
		}
	}

	button.components-button.responsive-toolbar-group__menu-item {
		&.is-selected {
			&::before {
				background-color: var(--studio-wordpress-blue);
			}

			&:hover::before {
				background-color: var(--studio-wordpress-blue-60);
			}
		}
	}

	.design-picker__category-group {
		display: flex;
		flex-direction: column;

		@include break-large {
			flex-direction: row;
			align-items: center;
			gap: 8px;

			&.design-picker__category-group--flex {
				min-width: 480px;
				display: inline-flex;
			}

			&.design-picker__category-group--grow {
				flex-grow: 1;
			}
		}

		.design-picker__category-group-content {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 8px 16px;

			@include break-large{
				flex-grow: 1;
			}
		}
	}

	.design-picker__category-group-label {
		text-transform: uppercase;
		font-size: rem(13px);
		font-weight: 500;
	}

	.design-picker__tier-filter {
		height: 40px; // match button height
		margin-bottom: 6px;
	}

	.design-picker__design-your-own-button {
		flex-shrink: 0;
		margin-bottom: 6px;
	}

	.design-picker__design-with-ai {
		display: none;
		margin-bottom: 0;
		padding-top: 6px; // vertically align with filters
		padding-bottom: 6px;
		
		@include break-large {
			display: block;
		}
	}

	.design-picker__design-your-own-button-without-categories {
		margin-left: auto;
		margin-top: -60px;
	}

	.design-picker__category-filter.responsive-toolbar-group__dropdown {
		width: 100%;
		padding-bottom: 0;

		.responsive-toolbar-group__grouped-list {
			justify-content: flex-start;
			border: none;

			> div:first-of-type {
				margin-inline-start: 0;
			}
	
			> div:last-of-type {
				margin-inline-end: 0;
			}
		}
	}
}
